<template>
  <div class="app-container">
    <help></help>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane name="await" label="待审核">
        <el-table border v-loading="loading" :data="list" size="small">
          <el-table-column align="center" fixed label="序号" type="index" width="50" />
          <el-table-column align="center" label="提审日期">
            <template slot-scope="scope">
              {{ scope.row.updateTime | moment }}
            </template>
          </el-table-column>
          <el-table-column align="center" label="经营户名称" prop="name" min-width="130" show-overflow-tooltip />
          <el-table-column align="center" label="经营户电话" prop="phone" min-width="110" />
          <el-table-column align="center" label="经营户类型">
            <template slot-scope="scope">
              <dict-tag :options="dict.type.agriculture_manage_type" :value="scope.row.type" />
            </template>
          </el-table-column>
          <el-table-column align="center" label="所属地区(组织)" min-width="110" show-overflow-tooltip>
            <template slot-scope="scope">
              <agriculture-region :value.sync="scope.row.deptId" type="text" />
            </template>
          </el-table-column>
          <el-table-column align="center" label="确权面积" prop="farmNum" />
          <el-table-column align="center" label="确权证">
            <template slot-scope="scope">
              <y-show-all-file :path="scope.row.url" height="50px" width="50px" />
            </template>
          </el-table-column>
          <el-table-column align="center" label="操作">
            <template slot-scope="scope">
              <el-button size="small" type="text" @click="handleAudit(scope.row.manageId)">审核</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane name="audited" label="已审核">
        <el-table border v-loading="loading" :data="list" size="small">
          <el-table-column align="center" fixed label="序号" type="index" width="50" />
          <el-table-column align="center" label="提审日期">
            <template slot-scope="scope">
              {{ scope.row.updateTime | moment }}
            </template>
          </el-table-column>
          <el-table-column align="center" label="经营户名称" prop="name" min-width="130" show-overflow-tooltip />
          <el-table-column align="center" label="经营户电话" prop="phone" min-width="110" />
          <el-table-column align="center" label="经营户类型">
            <template slot-scope="scope">
              <dict-tag :options="dict.type.agriculture_manage_type" :value="scope.row.type" />
            </template>
          </el-table-column>
          <el-table-column align="center" label="所属地区(组织)" min-width="110" show-overflow-tooltip>
            <template slot-scope="scope">
              <agriculture-region :value.sync="scope.row.deptId" type="text" />
            </template>
          </el-table-column>
          <el-table-column align="center" label="确权面积" prop="farmNum" />
          <el-table-column align="center" label="确权证">
            <template slot-scope="scope">
              <y-show-all-file :path="scope.row.url" height="50px" width="50px" />
            </template>
          </el-table-column>
          <el-table-column align="center" label="状态">
            <template slot-scope="scope">
              {{ scope.row.status == 1 ? '审核通过' : '驳回' }}
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>

    <help-dialog title="土地确权审核" :visible.sync="dialogVisible" width="30%">
      <el-form size="small" label-width="120px">
        <el-form-item label="操作">
          <el-radio v-model="queryParam.value" label="1">同意</el-radio>
          <el-radio v-model="queryParam.value" label="2">驳回</el-radio>
        </el-form-item>
        <el-form-item label="驳回意见" v-show="queryParam.value == 2">
          <el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="queryParam.advice" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleUpdate">确 定</el-button>
      </span>
    </help-dialog>
  </div>
</template>

<script>
import areaApi from '@/api/manage/area'
import AgricultureRegion from '@/components/AgricultureRegion/AgricultureRegion'

export default {
  dicts: ['agriculture_manage_type'],
  components: { AgricultureRegion },
  data() {
    return {
      activeName: 'await',
      loading: false,
      list: [],
      query: {
        pageNum: 1,
        pageSize: 10
      },
      total: 0,
      dialogVisible: false,
      queryParam: {
        manageId: '',
        value: '1',
        advice: ''
      }
    }
  },
  created() {
    this.getUncheckList()
  },
  methods: {
    getUncheckList() {
      this.loading = true
      areaApi.uncheckList(this.query).then((res) => {
        this.list = res.rows
        this.total = res.total
        this.loading = false
      })
    },
    getCheckList() {
      this.loading = true
      areaApi.checkList(this.query).then((res) => {
        this.list = res.rows
        this.total = res.total
        this.loading = false
      })
    },
    handleClick(tab) {
      tab.name == 'await' ? this.getUncheckList() : this.getCheckList()
    },
    handleAudit(manageId) {
      this.queryParam.manageId = manageId
      this.dialogVisible = true
    },
    handleUpdate() {
      if (this.queryParam.value == 1) {
        areaApi.check(this.queryParam).then((res) => {
          this.$message.success('操作成功')
          this.dialogVisible = false
          this.getUncheckList()
          this.queryParam = {
            manageId: '',
            value: '1',
            advice: ''
          }
        })
      } else {
        areaApi.refuse(this.queryParam).then((res) => {
          this.$message.success('操作成功')
          this.dialogVisible = false
          this.getUncheckList()
          this.queryParam = {
            manageId: '',
            value: '1',
            advice: ''
          }
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped></style>